<template>
  <div class="we_banner_editor">
    <draggable v-model="data.imgList">
      <div v-for="obj,n in data.imgList" class="img_item">
        <div class="img_wrap">
          <img :src="obj.url" alt="" width="100%" height="100%">
        </div>
        <div class="img_detail">
          <div class="img_field">标题：<el-input v-model="obj.title" type="text" size="small"></el-input></div>
          <div class="img_field">链接：<el-input v-model="obj.link" type="text" size="small"></el-input></div>
        </div>
        <i class="el-icon-close del" @click="handleDelImg(n)"></i>
      </div>
    </draggable>
    <div class="add_banner" @click="handleAddImg">
      <p style="color:#38f">+添加一个背景图</p>
      <p style="color:#999">建议尺寸 750x350 像素</p>
    </div>
    <!-- 选择图片 -->
    <el-dialog ref="dialog" title="选择图片" :visible.sync="dialog">
      <dialog-image></dialog-image>
      <div slot="footer">
        <el-button type="primary" @click="handleSelectImage">确定</el-button>
        <el-button @click="dialog=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  import draggable from 'vuedraggable'
  import dialogImage from '@/components/common/content/dialogImage'
  export default {
    props: ['data'],
    components: {dialogImage, draggable},
    data () {
      return {
        dialog: false
      }
    },
    computed: {
      ...mapState({
        selectedImg: state => state.sourceManage.selected
      })
    },
    methods: {
      // 添加一张轮播图
      handleAddImg () {
        this.dialog = true
      },
      // 选择图片
      handleSelectImage () {
        this.data.imgList.push({url: this.selectedImg.url, link: ''})
        this.dialog = false
      },
      handleDelImg (n) {
        this.data.imgList.splice(n, 1)
      }
    }
  }
</script>
<style lang="scss">
  .we_banner_editor{
    &{padding:15px;}
    .add_banner{padding-top:20px;height:80px;background:#fff;border:1px dashed #e5e5e5;text-align:center;box-sizing:border-box;cursor:pointer;}
    .img_item{
      &{position:relative;margin-bottom:10px;height:114px;background:#fff;border:1px solid #e5e5e5;box-sizing:border-box;}
      .img_wrap{float:left;margin:14px 0 0 14px;width:80px;height:80px;border:1px solid #e5e5e5}
      .img_detail{margin: 14px 0 0 105px;}
      .img_detail .el-input{width:228px;}
      .img_detail .img_field{margin-bottom:10px;}
      .del{position:absolute;right:5px;top:5px;color:#bbb;cursor:pointer;}
    }
  }
</style>
